<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>历史打卡记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all" th:href="@{/static/layui/css/layui.css}">
</head>
<body style="background-color:#a6e1ec">
<blockquote class="layui-elem-quote layui-text">
    <a href="/judge" >今日打卡</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" style="color: red">历史记录</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/personal">修改密码</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/myCard">负责患者</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/myDuty">重点监护</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/logout">退出</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/allShow">今日打卡现状&留言反馈</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/global">国内疫情现状-视图总览</a>
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>历史打卡记录：</legend>
</fieldset>


<!--<table id="tb-book" lay-filter="tb-book"></table>-->



<table class="layui-table">
    <tr th:height="50px" class="layui-table-header">
        <th>体温</th>
        <th>居住地</th>
        <th>联系方式</th>
        <th>提交时间(从上到下降序)</th>
        <th>健康码状态</th>
        <th>14天内是否踏足风险地区</th>
        <th>身体状况</th>
        <th>补充</th>
    </tr>
    <tr th:each="card:${cards}">
        <form class="layui-form">
            <td th:text="${card.getTemperatureToday()}+'℃'"></td>
            <td th:text="${card.getAddressOfHome()}"></td>
            <td th:text="${card.getPhoneNumber()}"></td>
            <td th:text="${card.getAssistBit()}"></td>
            <td th:text="${card.getHeathCodeState()}==0?'绿色':'非绿色'"></td>
            <td th:text="${card.getInDangerousPlace()}==0?'否':'是'"></td>
            <td th:text="${card.getBodyState()}==0?'健康':'有发烧、咳嗽、咽痛、腹泻、乏力、鼻塞、流涕等症状'"></td>
            <td th:text="${card.getExtend()}"></td>
        </form>
    </tr>
</table>
<script src="/static/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use('form', function(){
        var form = layui.form;
        form.render();
    });
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
    });
</script>


<script>
    var element, layer, laydate, table, form,userTable;


    function reload(){
        userTable.reload();
    }

    $(function () {
        // 使用模块
        layui.use(['element', 'layer', 'laydate', 'table', 'form'], function () {
            element = layui.element;
            layer = layui.layer;
            laydate = layui.laydate;
            table = layui.table;
            form = layui.form;
        });

        //第一个实例
        userTable = table.render({
            elem: '#tb-book'
            , height: 515
            , url: ctx+'historyRecord' //数据接口
            // , page: true //开启分页
            , toolbar: '#book-toolbar'
            ,id: 'tb-book'
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left',hide:true}
                    , {field: 'temperatureToday', title: '今日体温', width: 80}
                    , {field: 'addressOfHome', title: '居住地址', width: 160}
                    , {field: 'phoneNumber', title: '电话', width: 60}
                    , {field: 'assistBit', title: '提交时间', width: 180}
                    , {field: 'heathCodeState', title: '健康码', width: 120}
                    , {field: 'inDangerousPlace', title: '14天内是否去风险地区', width: 120}
                    , {field: 'bodyState', title: '身体状况', width: 80}
                    , {field: 'extend', title: '补充', width: 120}
                    , {fixed: 'right', title: '操作', toolbar: '#barOps', width: 100}
                ]
            ]
        });

        //监听表单提交
        // 修改
        form.on('submit(saveBook)', function (data) {
            layer.alert(JSON.stringify(data.field));
            $.ajax({
                url: ctx+'api/card/save',
                type: 'POST',
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data.field),
                success: function (result) {
                    if (result.code == 200) {
                        // layer.msg("修改成功！", {icon: 6});
                        cleanForm("#saveBook");
                        if(data.field.id.length>0){
                            layer.closeAll();//关闭所有的弹出层
                        }
                        userTable.reload();
                    }else {
                        layer.alert(result.message);
                    }
                }
            });
            return false;
        });
    });


</script>









</body>
</html>